---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Heatmap from markers
description: Create a heat map showing concentrations from marker data.
tags:
  - plugins
---
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-heat/v0.1.3/leaflet-heat.js'></script>
<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'mapbox.light'),
    // The maxZoom states which zoom the markers are fully opaque at -
    // in this case, there are few markers far apart, so we set it low.
    heat = L.heatLayer([], { maxZoom: 12 }).addTo(map);

// We're just using a featureLayer to pull marker data from Mapbox -
// this is not added to the map.
var layer = L.mapbox.featureLayer('examples.map-zr0njcqy').on('ready', function() {
    // Zoom the map to the bounds of the markers.
    map.fitBounds(layer.getBounds());
    // Add each marker point to the heatmap.
    layer.eachLayer(function(l) {
        heat.addLatLng(l.getLatLng());
    });
});
</script>
